<template>
	<view style="overflow-x: hidden;" v-if="orderInfo">
		<view class="nav-back">
			<top-heigth backTitle="申请售后"></top-heigth>
		</view>
		
		<view class="content-box m-b16 m-t24">
			<view class="public-box" style="padding-bottom: 0;padding-top: 0; overflow: hidden;">

				<view class="goods-box">
					<view class="goods">
						<view class="img-box">
							<image class="img" :src="orderInfo.tAppServiceVo.serviceImage" mode=""></image>
						</view>
						<view class="goods-font">
							<view class="start-top">
								<h1 class="goods-h1 start-h1">{{orderInfo.tAppServiceVo.serviceName}}</h1>
							</view>
							<view class="sale">预约时间：{{orderInfo.serviceReservedTime}}</view>
						</view>
					</view>
				</view>

				<view class="border-b">
					<view class="detail-font">
						<view class="left">实付金额</view>
						<view class="right red">{{orderInfo.orderAmount*1}}</view>
					</view>
					<view class="detail-font">
						<view class="left">商品总价</view>
						<view class="right">{{orderInfo.tAppServiceVo.serviceAmount}}</view>
					</view>
					<view class="detail-font">
						<view class="left">交通费</view>
						<view class="right">{{orderInfo.postAmount}}</view>
					</view>
					<view class="detail-font">
						<view class="left">优惠券</view>
						<view class="right">{{orderInfo.tAppCouponUserVo ? orderInfo.tAppCouponUserVo.tAppCouponVo.couponAmount : 0}}</view>
					</view>
				</view>
			
				<uv-form labelPosition="top" :model="model1" :rules="rules" ref="form" labelWidth="100%">
					<uv-form-item class="order-h1 m-t24" label="请选择退款理由" prop="formInfo.service" borderBottom>
						<uv-radio-group v-model="model1.formInfo.service">
							<uv-radio
								:customStyle="{margin: '3px'}" 
								v-for="(item, index) in servicelList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					</uv-form>
				<h1 class="order-h1 m-t24">退款理由</h1>
				<uv-textarea v-model="value" placeholder="请描述投诉/建议内容" style="background-color: #F8F8F8;border: none;"></uv-textarea>
				<view @click="upList()" class="login-but m-t80 m-b32">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				id: null,
				orderInfo: null,
				value:'',
				model1: {
					formInfo: {
						"sex": '',
						"age": '',
						"other": '',
						"otherName":"",
						"isNew": '',
						"channel": '',
						"channelName":"",
						"service": '',
						"power": '',
						"address": '',
						"body": [],
						"behavior": [],
						"material": '',
						"oil": '',
						"questionDesc":""
					}
				},
				servicelList: [{
					name: '1',
					label: '联系不上技师/商家',
				}, {
					name: '2',
					label: '技师爽约迟到',
				}, {
					name: '3',
					label: '不想要了/买多了',
				}, {
					name: '4',
					label: '与技师/商家协商一致',
				}, {
					name: '5',
					label: '自己临时有事',
				}],
			}
		},
		components: { TopHeigth },
		onLoad(e) {
			this.id = e.id
			this.getOrderInfo()
			Object.keys(this.model1.formInfo).map(key => {
				let obj = {};
				if(key == 'body' || key == 'behavior'){
					obj = {
						type: 'array',
						min: 1,
						required: true,
						message: '请选择！',
						trigger: ['change']
					}
				}else if(key == 'questionDesc'){
					obj = {
						type: 'string',
						required: true,
						message: '请填写！',
						trigger: ['blur', 'change']
					}
				}else{
					obj = {
						type: 'string',
						required: true,
						message: '请选择！',
						trigger: ['change']
					}
				}
				this.rules[`formInfo.${key}`] = obj;
			})
		},
		methods: {
			getOrderInfo(){
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/turnTAppOrderInfo',{
						id: this.id,
				}).then((res) => {
					this.orderInfo = res.data					
				})
			},
			upList(){
				if(!this.model1.formInfo.service){
					uni.showToast({
						icon: "none",
						title: "请选择退款理由"
					})
					return false
				}
				if(!this.value){
					uni.showToast({
						icon: "none",
						title: "退款理由不能为空"
					})
					return false
				}

				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/updateTAppOrderAfter',{
						refuseRemark:this.value,
						id:this.id,
						refundOption:Number(this.model1.formInfo.service),
						version:this.orderInfo.version,
				}).then((res) => {
					if(res.code == 200){
						uni.showToast({
							icon: "none",
							title: res.message
						}) 
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}					
				})
			},
			goOrder(){
				uni.navigateTo({
					url: "/pages/mine/order"
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	.content-box{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.complaint-top{
		@include flex;
		align-items: center;
		justify-content:space-between;
		.complaint-top-img{
			@include flex;
			align-items: center;
			justify-content:flex-start;
			font-size: 26rpx;
			.img{
				border-radius: 40rpx;
				overflow: hidden;
				font-weight: bold;
				color: #333;
				margin-right: 16rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.complaint-top-r{
			font-size: 24rpx;
			color: #999;
		}
	}
	.goods-bottom{
		@include flex;
		align-items: center;
		justify-content:space-between;
		.goods-bottom-r{
			@include flex;
			align-items: center;
			justify-content:space-between;
		}
		.goods-bottom-but{
			width: 136rpx;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 24rpx;
			color: #333;
			border: 2rpx solid #CBCBCB;
			border-radius:56rpx;
			text-align: center;
			margin-left: 16rpx;
		}
	}
	.detail-font{
		@include flex;
		align-items: center;
		justify-content:space-between;
		font-size: 24rpx;
		margin-bottom: 32rpx;
		.left{
			color: #999999;
		}
		.right{
			color: #333;
		}
	}
</style>
